<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析研判-多类事件关联研判</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome (使用可靠的CDN) -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 本地回退方案 -->
    <script>
        window.FontAwesome = window.FontAwesome || {};
        FontAwesome.config = FontAwesome.config || {};
        FontAwesome.config.searchPseudoElements = true;
    </script>
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: 'rgba(59, 130, 246, 0.92)',
                            mid: 'rgba(59, 130, 246, 0.94)',
                            dark: 'rgba(37, 99, 235, 0.96)',
                            hover: 'rgba(30, 64, 175, 0.96)',
                            border: 'rgba(59, 130, 246, 0.4)',
                            bg: 'rgba(240, 249, 255, 0.96)',
                            main: 'rgba(59, 130, 246, 1)',
                            accent: 'rgba(59, 130, 246, 0.15)'
                        },
                        threat: {
                            critical: '#EF4444',
                            high: '#F97316',
                            medium: '#FACC15',
                            low: '#84CC16',
                            info: '#3B82F6'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 12px rgba(0, 0, 0, 0.02)',
                        'card-hover': '0 6px 16px rgba(0, 0, 0, 0.04)',
                    },
                    borderRadius: {
                        'small': '8px',
                        'card': '12px',
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 3s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-4px)' },
                        },
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .glass {
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
            }
            .grid-bg {
                background-image: radial-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px);
                background-size: 20px 20px;
            }
            .card-hover-effect {
                transition: all 0.2s ease;
            }
            .card-hover-effect:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
            }
            .active-indicator {
                position: relative;
            }
            .active-indicator::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 3px;
                background-color: theme('colors.primary.main');
                border-radius: 0 4px 4px 0;
            }
            .hex-view {
                font-family: monospace;
                font-size: 12px;
                line-height: 1.5;
                letter-spacing: 1px;
            }
            .table-fixed-layout {
                table-layout: fixed;
            }
            .scrollbar-hidden::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hidden {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
    <!-- 引入Chart.js (使用可靠的CDN) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
    <!-- 回退检测脚本 -->
    <script>
        window.onload = function() {
            // 检测Chart.js是否成功加载
            if (typeof Chart === 'undefined') {
                console.warn('Chart.js加载失败，使用回退模式');
                // 可以在这里添加简单的回退功能
            }
        };
    </script>
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-primary-bg grid-bg min-h-screen text-gray-800 font-sans">
    <!-- 主容器 -->
    <div class="relative w-full h-screen overflow-hidden">
        <!-- 顶部操作区域 -->
        <header class="glass bg-white/90 border-b border-primary-border py-3 px-4 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">分析研判-多类事件关联研判</h1>
            </div>
            <div class="flex items-center gap-4">
                <!-- 时间范围选择 -->
                <div class="relative">
                    <select class="bg-white/80 border border-primary-border rounded-small px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary-main/20">
                        <option>过去24小时</option>
                        <option>过去7天</option>
                        <option>过去30天</option>
                        <option>自定义</option>
                    </select>
                </div>
                <!-- 视图切换已移除 -->
                <!-- 导出按钮 -->
                <button class="flex items-center gap-1 bg-white/80 border border-primary-border rounded-small px-3 py-1.5 text-sm hover:bg-gray-50">
                    <i class="fa fa-download text-primary-main"></i>
                    <span>导出</span>
                </button>

            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="flex h-[calc(100vh-57px)] overflow-hidden">
            <!-- 左侧事件列表 -->
            <aside class="w-80 bg-white/90 border-r border-primary-border flex flex-col overflow-hidden">
                <!-- 搜索和筛选 -->
                <div class="p-3 border-b border-primary-border">
                    <div class="relative">
                        <input type="text" id="event-search" placeholder="搜索时间名称、状态和危险程度" class="w-full pl-9 pr-4 py-2 bg-white/80 border border-primary-border rounded-small focus:outline-none focus:ring-2 focus:ring-primary-main/20">
                        <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    </div>
                    <!-- 搜索和筛选按钮已移除 -->
                </div>
                
                <!-- 高级筛选面板 -->
                <div id="advanced-filter-panel" class="hidden p-3 border-b border-primary-border bg-gray-50">
                    <div class="space-y-3">
                        <!-- 时间筛选 -->
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">时间范围</label>
                            <div class="grid grid-cols-2 gap-2">
                                <input type="date" id="date-from" class="w-full px-3 py-1.5 text-sm border border-primary-border rounded-small focus:outline-none focus:ring-2 focus:ring-primary-main/20">
                                <input type="date" id="date-to" class="w-full px-3 py-1.5 text-sm border border-primary-border rounded-small focus:outline-none focus:ring-2 focus:ring-primary-main/20">
                            </div>
                        </div>
                        
                        <!-- 处理状态筛选 -->
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">处理状态</label>
                            <div class="flex flex-wrap gap-1">
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="pending">
                                    <span class="ml-1 text-xs">待处理</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="analyzing">
                                    <span class="ml-1 text-xs">分析中</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="resolved">
                                    <span class="ml-1 text-xs">已解决</span>
                                </label>
                            </div>
                        </div>
                        
                        <!-- 攻击链阶段筛选 -->
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">攻击链阶段</label>
                            <div class="flex flex-wrap gap-1">
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="侦察">
                                    <span class="ml-1 text-xs">侦察</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="武器化">
                                    <span class="ml-1 text-xs">武器化</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="交付">
                                    <span class="ml-1 text-xs">交付</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="利用">
                                    <span class="ml-1 text-xs">利用</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="安装">
                                    <span class="ml-1 text-xs">安装</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="命令控制">
                                    <span class="ml-1 text-xs">命令控制</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="目标达成">
                                    <span class="ml-1 text-xs">目标达成</span>
                                </label>
                            </div>
                        </div>
                        
                        <!-- 威胁等级筛选 -->
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">威胁等级</label>
                            <div class="flex flex-wrap gap-1">
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="critical">
                                    <span class="ml-1 text-xs">紧急</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="high">
                                    <span class="ml-1 text-xs">高危</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="medium">
                                    <span class="ml-1 text-xs">中危</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="rounded text-primary-main" value="low">
                                    <span class="ml-1 text-xs">低危</span>
                                </label>
                            </div>
                        </div>
                        
                        <!-- 筛选按钮 -->
                        <div class="flex gap-2 mt-4">
                            <button id="apply-filter-btn" class="flex-1 bg-primary-main text-white py-1.5 rounded-small text-sm hover:bg-primary-hover transition-colors">
                                应用筛选
                            </button>
                            <button id="reset-filter-btn" class="px-3 py-1.5 border border-primary-border rounded-small text-sm hover:bg-gray-100 transition-colors">
                                重置
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 事件分类标签 -->
                <div class="px-3 py-2 border-b border-primary-border flex gap-2 overflow-x-auto scrollbar-hidden">
                    <button onclick="setAttackTypeFilter('全部')" class="px-3 py-1 bg-primary-accent text-primary-main rounded-full text-xs whitespace-nowrap">全部</button>
                    <button onclick="setAttackTypeFilter('Web攻击')" class="px-3 py-1 bg-white/80 border border-primary-border rounded-full text-xs whitespace-nowrap hover:bg-gray-50">Web攻击</button>
                    <button onclick="setAttackTypeFilter('恶意软件')" class="px-3 py-1 bg-white/80 border border-primary-border rounded-full text-xs whitespace-nowrap hover:bg-gray-50">恶意软件</button>
                    <button onclick="setAttackTypeFilter('暴力破解')" class="px-3 py-1 bg-white/80 border border-primary-border rounded-full text-xs whitespace-nowrap hover:bg-gray-50">暴力破解</button>
                    <button onclick="setAttackTypeFilter('数据泄露')" class="px-3 py-1 bg-white/80 border border-primary-border rounded-full text-xs whitespace-nowrap hover:bg-gray-50">数据泄露</button>
                    <button onclick="setAttackTypeFilter('内部威胁')" class="px-3 py-1 bg-white/80 border border-primary-border rounded-full text-xs whitespace-nowrap hover:bg-gray-50">内部威胁</button>
                </div>
                <!-- 事件列表 -->
                <div class="flex-1 overflow-y-auto" id="event-list">
                    <!-- 事件列表将通过JavaScript动态生成 -->
                </div>
            </aside>

            <!-- 中间分析工作区 -->
            <section class="flex-1 flex flex-col overflow-hidden bg-transparent">
                <!-- 标签页已移除 -->
                <!-- 分析内容区 -->
                <div class="flex-1 overflow-y-auto p-4" id="analysis-workspace">
                    <!-- 事件选择提示 -->
                    <div class="h-full flex items-center justify-center flex-col text-gray-500">
                        <i class="fa fa-info-circle text-6xl mb-4 text-primary-main/30 animate-float"></i>
                        <p class="text-lg">请从左侧事件列表中选择一个事件开始分析</p>
                    </div>
                    <!-- 事件详情内容将通过JavaScript动态生成 -->
                </div>
            </section>

            <!-- 右侧关联信息面板 -->
            <aside class="w-80 bg-white/90 border-l border-primary-border flex flex-col overflow-hidden">
                <!-- 面板标题 -->
                <div class="p-3 border-b border-primary-border flex items-center justify-between">
                    <h3 class="text-sm font-medium">关联信息</h3>
                    <button class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-angle-double-right"></i>
                    </button>
                </div>
                <!-- 关联面板内容 -->
                <div class="flex-1 overflow-y-auto p-3">
                    <!-- 关联事件 -->
                    <div class="mb-4">
                        <h4 class="text-xs font-medium text-gray-600 mb-2">相关事件</h4>
                        <div class="space-y-2" id="related-events">
                            <!-- 关联事件将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    <!-- 关联资产 -->
                    <div class="mb-4">
                        <h4 class="text-xs font-medium text-gray-600 mb-2">受影响资产</h4>
                        <div class="space-y-2" id="affected-assets">
                            <!-- 关联资产将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    <!-- 威胁情报 -->
                    <div>
                        <h4 class="text-xs font-medium text-gray-600 mb-2">威胁情报</h4>
                        <div class="space-y-2" id="threat-intel">
                            <!-- 威胁情报将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </aside>
        </main>
    </div>

    <!-- 引入JS文件 -->
    <script src="data.js"></script>
    <script>
            // 初始化事件监听器
            document.addEventListener('DOMContentLoaded', function() {
                // 高级筛选按钮
                const advancedFilterBtn = document.getElementById('advanced-filter-btn');
                if (advancedFilterBtn) {
                    advancedFilterBtn.addEventListener('click', toggleAdvancedFilter);
                }
                
                // 应用筛选按钮
                const applyFilterBtn = document.getElementById('apply-filter-btn');
                if (applyFilterBtn) {
                    applyFilterBtn.addEventListener('click', function() {
                        applyFilters();
                        // 应用筛选后关闭面板
                        const panel = document.getElementById('advanced-filter-panel');
                        if (panel) {
                            panel.classList.add('hidden');
                        }
                    });
                }
                
                // 重置筛选按钮
                const resetFilterBtn = document.getElementById('reset-filter-btn');
                if (resetFilterBtn) {
                    resetFilterBtn.addEventListener('click', function() {
                        // 确保resetFilters函数已定义
                        if (typeof resetFilters === 'function') {
                            resetFilters();
                        } else {
                            console.warn('resetFilters函数暂未定义');
                            // 临时实现重置功能
                            const dateInputs = document.querySelectorAll('#advanced-filter-panel input[type="date"]');
                            dateInputs.forEach(input => input.value = '');
                            const checkboxes = document.querySelectorAll('#advanced-filter-panel input[type="checkbox"]');
                            checkboxes.forEach(checkbox => checkbox.checked = false);
                        }
                    });
                }
                
                // 搜索框
                const searchInput = document.getElementById('event-search');
                if (searchInput) {
                    searchInput.addEventListener('input', handleSearch);
                }
            });
        </script>
    <script src="script.js"></script>
</body>
</html>